import { memo, useContext, useMemo, useState } from 'react'
import { Spin, Form, Checkbox, InputNumber } from 'antd'
import { isNullArray } from '@/utils'
import { reportCheckContext } from '../../_context'
import CardDataVarable from '@/components/CardDataVarable'
import styles from '../../index.module.less'
import { IVariableItem } from '@/@types/common'

export default memo(() => {
  const { varableTableList, varableLoading, varableForm, handleVarableChange, readyOnly } =
    useContext(reportCheckContext)

  interface FormItemProps {
    id: string // 变量id
    variableName: string // 变量名称
    variableValue: string // 变量值
    variableMin: number // 校验规则
    variableMax: number // 校验规则
    fatherId: string
    isShow: boolean
  }

  const FormItem = memo(
    ({ id, variableName, variableValue, variableMax, variableMin, fatherId, isShow }: FormItemProps) => {
      console.log('isShow🚀🚀🚀🚀', isShow)
      // const [isShowCheckbox, setIsShowCheckbox] = useState<boolean>(false)

      // const handleVarableChange = (e: { target: { checked: boolean } }) => {
      //   console.log('e🚀🚀🚀🚀', e)
      //   info.variableName = '666'
      //   setIsShowCheckbox(e.target.checked)
      // }

      return (
        <>
          {!readyOnly ? (
            <Form.Item name={id} valuePropName='checked' className={styles['cart-list-info-title']}>
              <Checkbox onChange={() => handleVarableChange(fatherId, id)}>{variableName}</Checkbox>
            </Form.Item>
          ) : (
            <div style={{ marginBottom: '8px' }}>{variableName}</div>
          )}
          <div className={styles['cart-list-info-data']}>
            <div className={styles['cart-list-info-data-value']}>{variableValue}</div>
            {isShow && (
              <Form.Item
                name={variableName}
                rules={[{ required: isShow, message: '请输入变量' }]}
                className={styles['cart-list-info-data-input']}
              >
                <InputNumber min={variableMin} max={variableMax} controls={false} placeholder='请输入修改后的值' />
              </Form.Item>
            )}
          </div>
        </>
      )
    },
  )

  return (
    <>
      <Spin
        spinning={varableLoading}
        style={{ minHeight: '120px', display: 'flex', justifyContent: 'center', alignItems: 'center' }}
      >
        <Form form={varableForm}>
          {isNullArray(varableTableList) &&
            varableTableList.map((item) => (
              <CardDataVarable key={item.id} text={item.sortName}>
                <div className={styles['cart-list']}>
                  {isNullArray(item.variablePlatformVos) &&
                    item.variablePlatformVos.map((val) => (
                      <div key={val.id} className={styles['cart-list-info']}>
                        <FormItem
                          id={val.id}
                          variableName={val.variableName}
                          variableMin={val.variableMin}
                          variableMax={val.variableMax}
                          variableValue={val.variableValue}
                          fatherId={item.id}
                          isShow={val.flag}
                        />
                      </div>
                    ))}
                </div>
              </CardDataVarable>
            ))}
        </Form>
      </Spin>
    </>
  )
})
